<template>
  <div class="box">
    <echartCompt class="box-chart" v-model="chartOption" />
  </div>
</template>

<script>
//import titleCompt from "@/components/titleCompt";
export default {
  components: {
    //titleCompt,
  },
  //props: {
  //  chartType: String, // 图表类型  chart table
  //},

  data() {
    return {
      //echart图表数据
      rowData: [
        { name: "大型企业", value: 10, formatterValue: 0 },
        { name: "中型企业", value: 20, formatterValue: 0 },
        { name: "小型企业", value: 30, formatterValue: 0 },
        { name: "微型企业", value: 40, formatterValue: 0 },
        { name: "其他", value: 50, formatterValue: 0 },
      ],
    };
  },

  watch: {
    condData() {
      // 监听当条件发生切换时，执行数据查询
      this.init();
    },
  },

  computed: {
    sql() {
      let sql = ``;
      // console.log(sql);
      return sql;
    },

    chartOption() {
      let data = this.rowData;
      //   this.rowData.forEach((item) => {
      //     data.push({
      //       name: item.QYHXLB_MC || 0,
      //       value: item.SBJYRS || 0,
      //       formatterValue: (item.TB * 100).toFixed(1) || 0,
      //     });
      //   });


      let opt = {
        tooltip: {
          formatter: (params) => {
            let name = params.name;
            let val = params.data.formatterValue;
            return name + "增速: " + val + "%";
          },
        },
        legend: {
          show: false,
          data: ["2020年", "2019年", "2018年"],
          top: "10%",
          textStyle: {
            color: "#fff",
          },
        },

        series: [
          {
            name: "就业成效",
            type: "funnel",
            left: "center",
            top: "10%",
            bottom: "5%",
            //x2: 80,
            width: "80%",
            minSize: "20%",
            maxSize: "80%",
            //sort值为ascending表示按数据倒序，表现为漏斗图
            sort: "descending",
            gap: 2,
            label: {
              show: true,
              position: "inside",
              formatter: (params) => {
                let name = params.name;
                let val = params.data.formatterValue;
                return name + "增速: " + val + "%";
              },
              textStyle: {
                fontSize: this.getSize(14),
                color: "#fff",
              },
            },
            labelLine: {
              length: this.getSize(10),
              lineStyle: {
                width: 1,
                type: "solid",
              },
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            emphasis: {
              label: {
                fontSize: this.getSize(20),
              },
            },
            data: data,
          },
        ],
      };

      return opt;
    },
  },

  mounted() {
    //this.init();
  },

  methods: {
    init() {
      //this.getData();
    },

    getData() {
      // 查询图表数据
      this.ajax({
        sql: this.sql,
        sqlTip: "右屏_促进就业效应_分企业规模",
      }).then((res) => {
        this.rowData = res;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  height: 100%;
  &-chart {
    height: calc(100%);
    text-align: left;
  }
}
</style>
